*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
             box-sizing: border-box;
            }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
/** * {
            margin: 0;
            padding: 0;
            /*box-sizing: border-box;}
        */
 /***   body {
        font-family: 'Segoe UI', sans-serif;
        flex-direction: row;   
        height: 100%;
        padding-bottom: 90px;
        }*/


.container {
    
    margin: 0px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    /* min-height: 100vh;*/
    max-height: auto;
    outline: 0px solid;
    background-color: rgb(255, 255, 255);
    /*agregando la parte grid*/

    display: grid;
    /*columnas repeat(cant columnas, fraccion)*/
    grid-template-columns: repeat(11,1fr);
    /*filas repeat(cant filas, fraccion)
    tambien puede escribirse valor por fila: 100px 10em 1fr*/
    grid-template-rows: repeat(93,20px);
}



.element{
    color: #3288eb;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    
}



/**************HEADER**************/
.element-1{
    background-color: #021224;
    width: 100%;
    grid-column: 1/11;
    grid-row: 1/4;
}

.imagen2 {
	padding: 1px;
	text-align: left;
	height: 100%;
	width: 180px;
	/*flex-shrink: 0;*/
	background: #021224;
	max-width: 100% !important;
    overflow-x: hidden !important;
    z-index: 9999999;
}

.imagen2 img {
    height: 100px;
    width: 120px;
    position: relative;
    z-index: 10005;
}

header {
            background: linear-gradient(135deg, #021224 0%, #021224 100%);
            color: #3288eb;
            padding: 1rem 2rem 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            /*position: sticky;*/
            top: 0;
            /*z-index: 1000;*/
            box-shadow: 0 2px 10px rgba(31, 165, 19, 0.1);
            height: 80px;
            padding: 2px;
            margin: none;
            width: 100%;
            font-size:  13px;
            text-decoration: none;
            position: fixed;
            /*display: grid;*/
            /*columnas repeat(cant columnas, fraccion)*/
           /* grid-template-columns: repeat(11,1fr);*/
            /*filas repeat(cant filas, fraccion)
            tambien puede escribirse valor por fila: 100px 10em 1fr*/
            /*grid-template-rows: repeat(80,20px);*/

        }
           
        nav {
               display: flex;
                align-items: end;
                flex-basis: 300px;
                padding: 35px;
            }
            nav a{
                
                color:#3288eb;
                text-decoration: none;
            }
            nav a:hover{
                color: rgb(66, 195, 247);
            }      
     
        .nav-menu {
            list-style: none;
            display: flex;
            gap: 1.5rem;   /* separa as pestañas*/
            margin-right: 200px;
            position: sticky;
        }
        .nav-menu a {
            color:#021730;
            text-decoration: none;
            padding: 0.5rem 1.2rem;
            background-color: #fff;
            border-radius: 18px 18px 0 0;
            transition: all 0.3s ease;
            display: inline-block;
            transform: translateY(38px);
            border-bottom: 3px solid transparent;
        }
        .nav-menu a:hover {
            border-bottom-color: #fff;
            transform: translateY(35px);
        }

        /* Botón hamburguesa (oculto en desktop) */
        .menu-toggle {
            display: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }
        
        .menu-toggle span {
            width: 100%;
            height: 3px;
            background-color: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        /* fin menu hamburguesa*/



/***********MAIN***********/
/*h1 {
    color: #021224;
    font-family: 'Times New Roman', Times, serif;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    background-color:#ffffff;
    display: grid;
    grid-column: 1/11;
    grid-row: 5/6;
    /*align-items: flex-end;
    justify-content: space-between; }*/
   

.titulo {
    background-color: #021224;
}

h2 {
    color: #48b2e4;
    background-color: #021224;
    font-family: 'Times New Roman', Times, serif;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: grid;
    grid-column: 1/11;
    grid-row: 5/6;
    /*align-items: flex-end;
    justify-content: space-between;*/
}


/************FRASE DE LOS SANTOS****************/
.element-6 {
    background-color:#ffffff;
    grid-column: 1/11;
    grid-row: 8/11;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 15px;
}
.element-6 p {
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 2px;
    margin-bottom: 10px;
    padding: 1px;
}



.imagen1 {
    
    height: 100px;
    width: 210px;
    grid-row: 4/4;
    border-radius: 20px 0px 20px 0px;
}
.img {
    height: 60px;
    width: 60px;
    margin-top: 2px;
    margin-right: 2px;
    /*border-radius: 50%;
    background-color: #fff;*/
      border-radius: 20px 0px 20px 0px;
}


.imagen4 img {
	padding-bottom: 2px;
	padding-top: 2px;
    margin-left: 150px;
    text-align: left;
	height: 70px;
	width: 220px;
	background: #021224;
}

/**********ACTIVIDADES CATOLICAS********/
.element-3{
    display: flex;
    Justify-content: space-between;
    background-color: rgba(229, 213, 241, 0.082);
    grid-column: 2/11; 
    grid-row: 13/48;
}
.element-3 p {
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 2px;
}



.actividades {
    display: flex;
    /*display: grid;*/
    background-color: rgba(229, 213, 241, 0.082);
    color: #0a3558;
    margin-top: 10px;
    margin-bottom: 2px;

}


.cuadro1 {
    display: grid;
    grid-column: 1/3; 
    grid-row: 10/45;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    margin-top: 5px;
    margin-left: 20px;
    margin-bottom: 2px;
    width: 15em;
	height: 600px;
    opacity: 0.9;
}

.cuadro2 {
    display: grid;
    grid-column: 9/11; 
    grid-row: 10/45;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: right;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 2px;
    width: 15em;
	height: 600px;
    opacity: 0.9;
}

.actividad1 {
    display: flex;
    grid-column: 1/11; 
    grid-row: 10/45;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: right;
    width: auto;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 2px;



        
}

.contenido
        {
           display: flex; 
           width: auto;
        }




/**********ORACIONES********/
.element-2{
    background-color: rgb(255, 255, 255);
    /*Justify-content:space-between;*/
    align-items: left;
    /*display: flex;*/
    /*align-items: inline-start;*/

    grid-column: 1/11;
    grid-row: 50/63;

    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 10px;
}


.titulo2 {
    display: flex;
    
    grid-column: 1/11;
    grid-row: 50/52;
    /* display: flex; gap: 16px; 
     align-items:  
     flex-start;*/
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 1px;
    padding: 1px;
}
.video-personalizado {
    grid-column: 1/11;
     
    grid-row: 54/60;
    display: flex; gap: 16px; 
     align-items: flex-start;

    /*background: linear-gradient(135deg, #021224 0%, #064e7e 100%);*/
    /*background-color: rgb(220, 230, 252);*/
    align-items: center;
    Justify-content: space-between;
    margin-top: 2px;
    margin-bottom: 1px;
    margin-left: 30px;
    
}

.element-2 video {
    background-color: rgba(220, 230, 252, 0);
    height: 150px;
    Justify-content:inline; 
	width: 240px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.oracionesss {
    display: flex; 
    align-items: flex-end;
    text-align: right;
}
.oracionesss a{
    display: block; 
    align-items: flex-end;
    text-decoration: none;
    color: #0a3558;
    background-color: rgb(255, 255, 255);
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 1px;
    padding: 1px;
}
.oracionesss img {
    height: 15px;
    width: 15px;
}
/******* LIBROS CATOLICOS ********/
.element-7{
    background-color: rgba(229, 213, 241, 0.048);
    grid-column: 1/11; 
    grid-row: 65/75;
     color: #051a41;
}
.element-7 img {
    height: 20px;
    width: 20px;
}
.libros{
    display: block;
    background-color: rgba(229, 213, 241, 0.082);
    grid-column: 1/11; 
    grid-row: 41/56;
    color: #051d31;
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    font-style: italic;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 55px;
}
.libro1{
    display: block;
    background-color: rgba(229, 213, 241, 0.082);
    grid-column: 1/11; 
    grid-row: 43/56;
    color: #051d31;
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    font-style: italic;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 55px;
}
.libros img {
    height: 15px;
    width: 15px;
}
.libros a{
    text-decoration: none; 
    color: #0a3558;
}   
.otroslibros {
    background-color: rgba(229, 213, 241, 0.062);
    grid-column: 1/11; 
    grid-row: 41/46;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: right;
    font-style: italic;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 15px;
}
.otroslibros img {
    height: 15px;
    width: 15px;
}
.otroslibros a{
    text-decoration: none; 
    color: #0a3558;
}  

/******* FRASES DE LA BIBLIA ********/
.element-4 {
    background-color: #ffffff;
    grid-column: 1/11;
    grid-row: 77/85;
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 15px;
}
.element-4 p {
    color: #0a3558;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 1px;
    padding: 1px;
}
/******FOOTER******/

/*.element-5{
    display: flex;
    background-color: #eaecee;;
    grid-column: 1/11;
    grid-row: 83/85;
   
}*/
/*.imagen {
    float: none !important;
    width: 90% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    display: block !important;
    height: auto !important;
}*/
footer {
	display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	font-size:  12px;
    font-family: 'Times New Roman', Times, serif ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #021224;
	height: 70px;
	padding-bottom: 20px;
	z-index: 1000;
	max-width: 100% !important;
    overflow-x: hidden !important;
}
.imagen3 {
	display: flex;
	text-align: center;
	height: 40px;
	width: 40px;
	margin-top: 2px;
	flex-direction: row;
	justify-content: space-between;
}
.flex-fo {
	display: flex;
    margin-top: 20px;
    flex-direction: row;
    width: 200px;  
    color:#3288eb;
	text-align: center;  
	justify-content: space-between;
}




/********************************************************************************************/
/********************************************************************************************/

/* Responsive móvil */
        @media (min-width: 0px) and (max-width: 480px) {
            *,
            *::before,
            *::after {
            box-sizing: inherit;
            }
            html {
             box-sizing: border-box;
            }
            .body {
                margin: 0;
                padding: 0;
                width: 100%;
                max-width: 100%;
                
                font-family: 'Segoe UI', sans-serif;
                /*display: flex;*/
                flex-direction: row;   
                /*width: 1800px; */
                height: 100%;
                /*position: fixed;*/
                padding-bottom: 90px;
                /*width: 100%;
                height: 100%;*/
                /*outline: 0px solid;*/
                background-color: rgb(255, 255, 255);
                /*display: flex;*/
                /*flex-direction: row
                grid-template-columns: repeat(11,1fr);
                grid-template-rows: repeat(120,20px);*/
            }
            
            .container {
                
                margin: 0px;
                /*width: 100%;
                height: 100%;*/
                /*min-height: 100vh;*/
                /*max-height: 100%;*/
                /*outline: 0px solid;*/
                /*background-color: rgb(255, 255, 255);*/
                /*display: flex;
                flex-direction: column;
                grid-template-columns: repeat(11,1fr);
                grid-template-rows: repeat(120,20px);*/
            }

            .element-1{
                color: #3288eb;
                text-align: left;
                /*font-size: 1.5rem;*/
                padding-bottom: 10px;
                font-weight: bold;
                position: sticky;
                width: 100%;
                
                height: 100%;
                
                }
            header {
                display: grid;
                flex-direction: column;
                /*justify-content: space-between;*/
                /*align-items: grid-start;*/
                width: 100%;
                max-width: 480px;
				/*height: 80px;*/
                position: relative;
				background-color: #021224 ;
                /*grid-column: 1/11; 
                grid-row: 1/3;*/
                grid-row: auto;
				grid-column: auto;
				
	        }
            .imagen1 img {
                /*display: inline-block;*/
                position: sticky;
                /*flex-shrink: 1;*/
				margin-right: 10px;
                padding-bottom: 1px;
				height: 170px;
				width: 160px;
                z-index: 9999;
            }
           .logo a {
                
                margin-bottom: 0;
                font-size: 1.5rem;
                margin-left: 5px;
            }
            .menu-toggle { display: flex; }
                #nav-menu {
                /*position: sticky;*/
                top: 100%;
                left: 0;
                width: 100%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
				color:#021730;
                z-index: 9999;
            }
            #nav-menu.active { max-height: 100px;  }
            .nav-menu {
                flex-direction: row;
                /*gap: 10px;*/
                width: 100%;
                align-items: center;
                Justify-content: right; 
				margin-left: 100%;
                padding-bottom: 1px;
                /*height: 10px;*/
                text-align: center;
                color:#021730;
                z-index: 99999;
                /*position: sticky;*/
            }
            .nav-menu a {
                transform: none;
                border-radius: 15px;
                text-align: left;
                /*padding: 0.45rem;
                margin: 0.15rem 0;*/
                color:#021730;
            	text-decoration: none;
           		/*padding: 0.5rem 1.2rem;*/
           		background-color: #fff;
    			transform: translateY(38px);
           		border-bottom: 3px solid transparent;
			}
            .nav-menu a:hover {
                border-bottom-color: #fff;
	            transform: translateY(35px);
            }
            /* Animación hamburguesa */
            .menu-toggle.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            .menu-toggle.active span:nth-child(2) {
                opacity: 0;
            }
            .menu-toggle.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -6px);
            }

            /** FRASES SANTOS**/
            
            /** ACTIVIDADES**/
            .element-3 {
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 12/46;
                align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
            }

            /*.actividad1 {
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 12/46;
                align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
                
            }*/

            
            /** ORACIONES**/
            .element-2 {
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 54/60;
                align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
                
            }
            .element-2,.video-personalizado {
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                /*grid-row: 61/80;*/
                align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
                
            }
            /** LIBROS**/
            .element-7{
                
                background-color: rgba(229, 213, 241, 0.048);
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 85/95;
                color: #051a41;
                 align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
              
            }    
            /** FRASES BIBLIA**/

            .element-4 {
                
                background-color: rgba(229, 213, 241, 0.048);
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 96/106;
                color: #051a41;
                 align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
              
            }    

            /** FOOTER**/
            





       }
        /*fin responsive movil */














/*************Ocultar scrollbars en Chrome, Edge y Safari ****/
.imagen2::-webkit-scrollbar { width: 0px; background: transparent;}
footer::-webkit-scrollbar { width: 0px; background: transparent;}
header::-webkit-scrollbar {    width: 0px;  background: transparent;}
html::-webkit-scrollbar { width: 0px;  background: transparent;}
/* Opcional: para Firefox */
html { scrollbar-width: none;}
/******************************/

/****  responsive***/


/**** 
 @media screen and (max-width: 1470px){
        .container {
             flex-direction: column;
            display: grid;
            grid-template-rows: 5px 80px;
            grid-template-columns: repeat(1, 1fr);
            }

        .element-1 {
             flex-direction: column;
            grid-row: 1/5;
            grid-column: 1 / span 7 ;  
            } 
        .header {
            flex-direction: column;
            grid-row: 1/5;
            grid-column: 1 / span 7 ;  
            
            }
        .element-6 {
            grid-row: 5;
            grid-column: 1 / span 7 ; 
            }
        .element-2 {
            grid-row: 100;
            grid-column: 2 / span 7 ;  
            }
       
        .element-3 {
            grid-row: 32;
            grid-column: 1 / span 7 ; 
            }
        .element-7 {
            flex-direction: column;
            grid-row: 130;
            grid-column: 2 / span 6 ;  
        }
        .element-4 {
            grid-row: 85;
            grid-column: 1 / span 7 ;  
        }
        
               
        .element-5{
            grid-row: 6 / 7;
            grid-column: 1 / span 7;
            
            }
        .footer {
            grid-row: 6 / 7;
            grid-column: 2 / span 6 ;
            grid-template-columns: repeat(1, 1fr);
            }
} ***/

/**
@media screen and (max-width: 1470px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .element-1 { grid-row: 1; grid-column: 1/7; }
  .header    { grid-row: 1; grid-column: 1/7; }
  .element-6 { grid-row: 5; grid-column: 1/7; }
  .element-3 { grid-row: 12; grid-column: 1/7; }
  .element-4 { grid-row: 85; grid-column: 1/7;  }
  .element-2 { grid-row: 100; grid-column: 1/7; }
  .element-5 { grid-row: 6; grid-column: 1/7; }
  .element-7 { grid-row: 130; grid-column: 1/7; }
  .footer    { grid-row: 6/7; grid-column: 2/6; grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 800px) {
    .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .element-1 { grid-row: 2/2; grid-column: 1/2; }
  .header    { grid-row: 2/2; grid-column: 1/2; }
  .element-6 { grid-row: 10; grid-column: 1/2; }
  .element-3 { grid-row: 24; grid-column: 1/2; }
  .element-4 { grid-row: 85; grid-column: 1;flex-direction: column; }
  .element-2 { grid-row: 6; grid-column: 1; }
  .element-5 { grid-row: 7; grid-column: 1; }
  .element-7 { grid-row: 8; grid-column: 1; }
  .footer    {  grid-row: 6/7; grid-column: 2/6; grid-template-columns: repeat(1, 1fr); }
  
   Aquí solo pon ajustes de tamaño de texto o padding si los necesitas 
}**/